Browser Registration

The Browser Registration feature allows users to securely register browsers with the One37ID system. This functionality ensures that only authorized devices are recognized as trusted browsers, improving overall security. The registration process involves scanning a QR code, entering a registration code, and assigning a browser name, which are subsequently encrypted and stored as trusted identifiers.

Purpose

The Browser Registration feature is designed to provide a secure and structured way to manage user browsers within an application using One37ID. It leverages secure QR code scanning and cryptographic techniques to uniquely identify and authorize browsers, ensuring safe interactions.

Feature Workflow

1. User Initiates Registration:

   • The user is prompted to open a URL (https://secure.one37id.com/r) on their desktop or another browser.
   • This URL displays a QR code and a unique registration code, both of which are temporary for security purposes.

2. Scan the QR Code:

   • The user taps the Start button in the app, which launches a QR code scanner.
   • The QR scanner reads the QR code data and extracts a cipher hash (cipherText), which serves as an encrypted identifier.

3. Decrypt the Cipher Hash:

   • Once the QR code is scanned, the app prompts the user to enter the registration code. The app then uses the registration code as a passphrase to decrypt the cipher hash.
   • The decrypt method from One37ID SDK is invoked to obtain a fingerprint from the cipherText.

4. Complete Registration:

   • The user assigns a name to the registered browser.
   • The app securely stores the browser information in One37ID’s Trust Browser Manager.

5. Display Registered Browsers:

   • The app fetches and displays a list of previously registered browsers in a list view for easy access.

Component Breakdown

Browser Registration Screen

The BrowserRegistrationScreen component is responsible for presenting the main user interface and managing the core functionalities related to browser registration. This includes launching the QR code scanner, listing registered browsers, and handling modal displays.

Key Elements

• Header Component: Displays the title and back navigation.
• Instructions: Guides the user on the registration process.
• Start Button: Initiates the QR scanner modal for reading the QR code.
• Registered Browsers List: Shows a list of all previously registered browsers.

Key Code Snippets:

const toggleScanCodeModalPopup = () => {
  setShowScanCodeModal(!showScanCodeModal);
};

const handleLinkPress = () => {
  Linking.openURL("https://secure.one37id.com/r");
};

Browser Registration Modal

The BrowserRegistrationModal component manages user input for the registration code and browser name. It validates the user inputs and triggers the registration process if the form is complete.

Key Features

• Code Input Validation: Accepts a four-digit registration code.
• Browser Name Input: Prompts the user to provide a name for the browser.

Key Code Snippets:

const handleRegister = () => {
  if (isFormValid) {
    const registrationCode = code.join("");
    onRegister(browserName, registrationCode);
    onClose();
  }
};

QR Code Scanner

The QR Code Scanner uses the SSIQRReaderScreenScannerStyled component to read and validate QR codes. It captures the scanned data and triggers further processing based on the extracted QR hash.

Key Code Snippet:

const onBarcodeScanned = async (
  readEvent: BarcodeScanningResult
): Promise<void> => {
  toggleScanCodeModalPopup();
  if (readEvent.data.startsWith("upa://br/")) {
    const extractedHash = readEvent.data.split("upa://br/")[1];
    setHash(extractedHash);
    togglePassphraseModal();
  } else {
    alert("Invalid QR code");
  }
};

Core Functions and SDK Methods

getAgent

Initializes and retrieves the One37ID SDK agent. This agent is essential for interacting with browser management methods.

const getAgent = async (): Promise<Agent> => {
  agent = await initializeAgent();
  if (!agent) throw new Error("Agent not initialized");
  return agent;
};

decrypt

Decrypts the QR code's cipherText using the registration code (passphrase). The decryption yields a browser-specific fingerprint.

Parameters:

• cipherText (string): Encrypted data from the scanned QR code.
• passphrase (string): Registration code entered by the user.

Usage:

const decrypt = async (
  cipherText: string,
  passphrase: string
): Promise<string> => {
  const result = await agent.trustBrowserManager.decrypt(
    cipherText,
    passphrase
  );
  if (result.isSuccessful && result.result) return result.result;
  else throw new Error(result.error);
};

createBrowser

Registers a new browser using the decrypted fingerprint and a user-provided name.

Parameters:

• model (CreateTrustBrowser): Object containing fingerprint and displayName.

Usage:

const createBrowser = async (model: CreateTrustBrowser): Promise<boolean> => {
  const result = await agent.trustBrowserManager.create(model);
  if (result.isSuccessful) return true;
  else throw new Error(result.error);
};

Getting the List of Registered Browsers

To fetch a list of browsers already registered by the user, the getList method is used. This method retrieves all registered browsers stored in the One37ID system.

Code Snippet:

const fetchBrowsers = async () => {
  const agent = await getAgent();
  const result = await agent.trustBrowserManager.getList();
  if (result.isSuccessful && result.result) {
    setRegisteredBrowsers(result.result);
  }
};

// Call fetchBrowsers within useEffect to load registered browsers on screen mount
useEffect(() => {
  fetchBrowsers();
}, []);

Sample Code

The following sample code demonstrates the complete workflow:

const BrowserRegistrationScreen = () => {
  const [showScanCodeModal, setShowScanCodeModal] = useState(false);
  const [registeredBrowsers, setRegisteredBrowsers] = useState<TrustBrowser[]>([]);
  const [showPassphraseModal, setShowPassphraseModal] = useState(false);
  const [hash, setHash] = useState('');

  let agent: Agent | undefined;

  const getAgent = async (): Promise<Agent> => {
    agent = await initializeAgent();
    if (!agent) throw new Error('Agent not initialized');
    return agent;
  };

  const fetchBrowsers = async () => {
    const agent = await getAgent();
    const result = await agent.trustBrowserManager.getList();
    if (result.isSuccessful && result.result) {
      setRegisteredBrowsers(result.result);
    }
  };

  useEffect(() => {
    fetchBrowsers();
  }, []);

  const toggleScanCodeModalPopup = () => {
    setShowScanCodeModal(!showScanCodeModal);
  };

  const onBarcodeScanned = async (readEvent: BarcodeScanningResult): Promise<void> => {
    toggleScanCodeModalPopup();
    if (readEvent.data.startsWith('upa://br/')) {
      const extractedHash = readEvent.data.split('upa://br/')[1];
      setHash(extractedHash);
      togglePassphraseModal();
    } else {
      alert('Invalid QR code');
    }
  };

  const handleBrowserRegistration = async (browserName: string, browserCode: string) => {
    const fingerprint = await decrypt(hash, browserCode);
    const tb: CreateTrustBrowser = { fingerprint: fingerprint, displayName: browserName };
    const res = await createBrowser(tb);
    if (res) {
      alert('Browser registered successfully');
      RootNavigation.goBack();
    } else {
      alert('Failed to register browser');
    }
  };
};

Data Flow and Security Details

1. QR Code Scanning:
   • The QR code contains an encrypted string (cipherText) with a unique identifier.
2. Decryption with Passphrase:
   • The registration code provided by the user serves as the decryption key for extracting the unique fingerprint.
3. Browser Registration:
   • The app registers the decrypted fingerprint along with a user-provided browser name using the Trust Browser Manager.

Handling Errors

• Agent Initialization Errors: Ensures the agent is initialized before any SDK interactions.
• Invalid QR Code: Alerts the user if the QR code does not match the expected format.
• Decryption Failures: Catches decryption errors and displays user-friendly messages.
• Registration Failures: Handles errors during browser creation and notifies the user of any issues.

Extending Functionality

• Delete Registered Browsers: Extend the code to allow users to delete registered browsers.
• Edit Browser Information: Provide options for users to update browser names.
• Custom QR Scanner UI: Enhance the visual presentation of the QR code scanner based on your app's design.

More Browser registration functionalities can be found in the Trust Browser Manager Class documentation.